<template>
  <div class="form-container">
    <van-form @submit="submitForm">
      <van-nav-bar
        left-text="返回"
        @click-left="$router.back()"
        fixed
        title="修改个人信息"
      />
      <div class="title-padding"></div>
      <van-field
        v-model="visitorData.account"
        label="账号"
        required
        :rules="[{ required: true, message: '请填写账号' }]"
      ></van-field>
      <van-field
        v-model="visitorData.name"
        label="用户名"
        required
        :rules="[{ required: true, message: '请填写用户名' }]"
      ></van-field>
      <!-- <van-field v-model="visitorData.sex" label="性别"></van-field> -->
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="visitorData.sex" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="visitorData.phoneNum"
        label="手机号码"
        :rules="[
          { required: false, message: '请填写电话号码' },
          { validator: validatePhone, message: '电话号码格式不正确' },
        ]"
      ></van-field>
      <van-field
        v-model="visitorData.email"
        label="邮箱"
        placeholder="请输入邮箱"
        required
        :rules="[
          { required: true, message: '请填写邮箱' },
          { validator: validateEmail, message: '邮箱格式不正确' },
        ]"
      />
      <van-button class="submitBtn" type="primary" round native-type="submit"
        >提交</van-button
      >
      <van-button class="backBtn" type="danger" round @click="returnBack"
        >返回</van-button
      >
    </van-form>
  </div>
</template>

<script>
/* eslint-disable */
import { getLocal, saveLocal } from "@/utils";
import { visitor_updata } from "@/api";
import { Toast } from "vant";
export default {
  name: "car-page",
  data() {
    return {
      visitorData: {},
    };
  },
  methods: {
    async submitForm() {
      const res = await visitor_updata(this.visitorData);
      if (res.code == 0) {
        Toast.success("修改成功");
        saveLocal("visitorData", this.visitorData);
        this.$router.push("/user");
      }
    },
    returnBack(e) {
      e.preventDefault();
      this.$router.back();
    },
    getDetail() {
      this.visitorData = getLocal("visitorData");
      console.log(this.visitorData);
    },
    validatePhone(value) {
      if (value) return /^1[3|4|5|7|8][0-9]\d{8}$/.test(value);
    },
    validateEmail(value) {
      return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(
        value
      );
    },
  },
  created() {
    this.getDetail();
  },
};
</script>

<style scoped>
.title-padding {
  padding-top: 5vh;
}
.form-container {
  padding: 0 10px;
  background: #f5f5f5;
  height: 100vh;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.submitBtn {
  margin-left: 28vw;
  margin-top: 1vh;
  /* display: flex;
  justify-content: center; */
}
.backBtn {
  margin-left: 2vw;
}
</style>
